import React, { useEffect, useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import axios from "axios";
import { Button, SearchBar, Dropdown, Radio, Space, Toast } from "antd-mobile";
import { SearchBarRef } from "antd-mobile/es/components/search-bar";
import { ArrowDownCircleOutline, DownOutline } from "antd-mobile-icons";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();

  const xzcity = () => {
    navigate("/search");
  };
  let [sortlist,setSortlist]=useState<any>([])
  const render=()=>{
    axios.get('/api/sortlist').then((resp)=>{
      setSortlist(resp.data.sortlist)
    })
  }
  useEffect(()=>{
    render();
  },[])
  const sx=()=>{
    let sxlist=[...sortlist].sort((a:any,b:any)=> {return a.count-b.count})
    setSortlist(sxlist)
  }
  const jx=()=>{
    let jxlist=[...sortlist].sort((a:any,b:any)=> {return b.count-a.count})
    setSortlist(jxlist)
  }

  return (
    <div>
      <div className="sorttop">
      <NavBar title="医生列表" onClickLeft={() => navigate(-1)} />
      <div onClick={xzcity}>
        <SearchBar placeholder="请输入内容" />
      </div>
      <div className="sjbtn">
        <Button color="primary" id="sxbtn" onClick={()=>sx()}>升序</Button>
        <Button color="primary" id="jxbtn" onClick={()=>jx()}>降序</Button>
      </div>
      </div>
      <div className="sjlist">
        {sortlist.length > 0 && sortlist.map((item,index)=><div key={index}>
          <div>
            <div><img  src={item.img}/></div>
            <div>标题：{item.title}</div>
            <div>数量：{item.count}</div>
          </div>
        </div>)}
      </div>
    </div>
  );
};
export default Index;
